
//文档加载完成后执行
window.onload = function () {

    //需要图片 定义数组接收图片(来源于服务器)
    var pics = ["img/pic0.jpg", "img/pic1.jpg", "img/pic2.jpg", "img/pic3.jpg", "img/pic4.jpg"];
    var desc = ["黄昏", "白雪", "冰山", "雾凇", "夕阳"];

       //获取所有小块
       var items = document.querySelectorAll(".item");


    //定义变量 存储图片索引
    var index = 0;

    //间隔一定时间切换图片
   var lb = setInterval(changePic, 3000);

    //小块单击也要切换  为每个小块绑定单击事件
    for(let i = 0; i < items.length; i++){
       //调用一个函数绑定事件  传入每个小块或i
       checkBLock(i);
    }


    //切换图片的函数
    function changePic() {
        //2s后换下一张图片
        index++;

        //图片是不是超过了数组最大下标
        if (index > pics.length - 1) {
            index = 0;//从第一张开始
        }

        //根据src切换图片
        var pic = document.querySelector("#img-pic");
        //图片src=数组中匹配的某个图片
        pic.src = pics[index];

        //切换时小块处理  对应的块和图片一起切换
     
        //遍历
        for (let i = 0; i < items.length; i++) {
            //寻找和图片对应的块  显示样式
            if (i == index) {
                items[i].style.backgroundColor = "blueviolet";
                items[i].innerHTML= desc[index];

            } else {

                //不对应的恢复
                items[i].style.backgroundColor = "pink";
                items[i].innerHTML=i + 1;
            }


        }
    }


    //为小块绑定函数
    function checkBLock(id){
        //绑定单击事件
        items[id].onclick=function(){
            //点击某个小块显示对应的图片
            index =  id ;//图片索引等于当前小块索引
            console.log("1:"+index);
            index --;
            console.log("2:"+index);
            //切换时会+1
            if(index < -1){
                index = 0;
            }

           
            //让切换图片的函数运行
            changePic();

            //清除定时函数
            clearInterval(lb);


            //当前图片2s后再自动运行
            lb = setInterval(changePic, 3000);

        }
    }










}


